<template>
	<view class="device-manage">
		<view class="section">
			<view class="device-title">大门设置</view>
			<view class="card-box">
				<view class="card">
					<view class="card-item">
						<view>设备类型：</view>
						<view>涂鸦继电器</view>
					</view>
					<view class="card-item">
						<view>设备名称：</view>
						<uni-easyinput class="pop-input" :maxlength="32" primaryColor="#ffd589" trim="all"
							v-model="settingInfo.equipmentName" placeholder="请输入设备名称"></uni-easyinput>
					</view>
					<view class="card-item">
						<view>设备 ID：</view>
						<uni-easyinput class="pop-input" :maxlength="32" primaryColor="#ffd589" trim="all"
							v-model="settingInfo.equipmentId" placeholder="请输入设备ID"></uni-easyinput>
					</view>
				</view>
			</view>
		</view>

		<view class="footer-box">
			<text class="add-btn" @click="saveStoreDoorSetting">保存设置</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				settingInfo: {
					equipmentId: "",
					equipmentName: ""
				},
				shopId: ''
			};
		},
		methods: {
			//获取包间的门禁设备
			getStoreDoorSetting() {
				this.$request({
					method: 'get',
					url: `/applet/store/productEquipment/getShopDoor/${this.shopId}`,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if (res.data) {
						this.settingInfo = res.data
					}
				})
			},
			// 保存
			saveStoreDoorSetting() {
				const data = this.settingInfo
				data.shopId = this.shopId
				data.equipmentNo = data.equipmentId
				let method = ''
				let path = ''
				if (data.id) {
					method = 'put'
					path = '/applet/store/productEquipment/editShopDoor'
				} else {
					method = 'post'
					path = '/applet/store/productEquipment/addShopDoor'
				}
				this.$request({
					method: method,
					url: path,
					data,
					loading: true,
					isEncrypt: false
				}).then(res => {
					if (res.code === 200) {
						uni.showToast({
							title: '保存成功',
							duration: 2000,
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							duration: 2000,
							icon: 'none'
						})
					}
				})
			}

		},
		onLoad(options) {
			this.shopId = options.shopId;
			this.getStoreDoorSetting()
		}
	}
</script>

<style lang="scss" scoped>
	.device-manage {
		padding-bottom: 112rpx;

		.section {
			margin-bottom: 20rpx;
		}

		.device-title {
			position: relative;
			background: #FFF;
			padding: 30rpx;
		}

		.device-title::before {
			content: '';
			width: 8rpx;
			height: 36rpx;
			position: absolute;
			left: 10rpx;
			top: 34rpx;
			background: #ff9600;
		}

		.card-box {
			padding: 30rpx;
		}

		.card {
			background: #FFF;
			border-radius: 10rpx;
			padding: 20rpx;
			box-shadow: 0 2px 6px #CCC;
			margin-bottom: 20rpx;
		}

		.card-item {
			border-bottom: 1px solid #EEE;
			padding: 20rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.btn-box {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			font-size: 28rpx;
			margin-top: 20rpx;

			.edit-btn {
				padding: 8rpx 46rpx;
				font-size: 24rpx;
				border-radius: 10rpx;
				color: #FFF;
				background: #169bd5;
				margin-left: 20rpx;
			}

			.delete-btn {
				padding: 8rpx 46rpx;
				font-size: 24rpx;
				border-radius: 10rpx;
				color: #FFF;
				background: #ff9600;
				margin-left: 20rpx;
			}
		}

		.footer-box {
			width: 100%;
			position: fixed;
			bottom: 0;
			padding: 30rpx 0;
			text-align: center;
			background: #FFF;

			.add-btn {
				display: inline-block;
				color: #FFF;
				background: #ff9600;
				font-size: 24rpx;
				border-radius: 10rpx;
				padding: 10rpx 60rpx;
			}
		}

		.pop-box {
			background: #FFF;
			border-radius: 20rpx;
			padding: 30rpx;
			width: 600rpx;

			.pop-title {
				font-size: 32rpx;
				font-weight: 600;
				text-align: center;
				margin-bottom: 30rpx;
			}

			.pop-item {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				margin-bottom: 30rpx;
			}

			.pop-unit {
				margin-left: 10rpx;
			}

			.pop-btn-box {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 20rpx 60rpx;

				.cancel-btn {
					padding: 8rpx 46rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					border: 1px solid #CCC;
				}

				.submit-btn {
					padding: 8rpx 46rpx;
					font-size: 24rpx;
					border-radius: 10rpx;
					color: #FFF;
					background: #ff9600;
				}
			}
		}

		.no-more {
			text-align: center;
			padding: 32rpx 0;
			color: #CCC;
			font-size: 28rpx;
		}

	}
</style>